<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
  <div class="categray">
    <div>
      <header class="category-header wrap">
        <i class="nbicon nbfanhui" @click="goHome"></i>
        <div class="header-search">
          <i class="nbicon nbSearch"></i>
          <router-link
            tag="span"
            class="search-title"
            to="./product-list?from=category"
            >全场50元起步</router-link
          >
        </div>
        <i class="iconfont icon-More"></i>
      </header>
      <nav-bar></nav-bar>
      <div class="search-wrap" ref="searchWrap">
        <list-scroll :scroll-data="categoryData" class="nav-side-wrapper">
          <ul class="nav-side">
            <li
              v-for="item in categoryData"
              :key="item.categoryId"
              v-text="item.categoryName"
              :class="{ active: currentIndex == item.categoryId }"
              @click="selectMenu(item.categoryId)"
            ></li>
          </ul>
        </list-scroll>
        <div class="search-content">
          <list-scroll :scroll-data="categoryData">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <template v-for="(category, index) in categoryData">
                  <div
                    class="swiper-slide"
                    v-if="currentIndex == category.categoryId"
                    :key="index"
                  >
                    <!-- <img class="category-main-img" :src="category.mainImgUrl" v-if="category.mainImgUrl"/> -->
                    <div
                      class="category-list"
                      v-for="(
                        products, index
                      ) in category.secondLevelCategoryVOS"
                      :key="index"
                    >
                      <p class="catogory-title">{{ products.categoryName }}</p>
                      <div
                        class="product-item"
                        v-for="(
                          product, index
                        ) in products.thirdLevelCategoryVOS"
                        :key="index"
                        @click="selectProduct(product)"
                      >
                        <img
                          src="//s.weituibao.com/1583591077131/%E5%88%86%E7%B1%BB.png"
                          class="product-img"
                        />
                        <p
                          v-text="product.categoryName"
                          class="product-title"
                        ></p>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </list-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/NavBar";
import listScroll from "@/components/ListScroll";
import { getCategory } from "../service/good";
export default {
  components: {
    navBar,
    listScroll,
  },
  data() {
    return {
      categoryData: [],
      currentIndex: 15,
    };
  },
  async mounted() {
    this.setWrapHeight();
    const { data } = await getCategory();
    this.categoryData = data;
  },
  methods: {
    goHome() {
      this.$router.push({ path: "home" });
    },
    setWrapHeight() {
      // 设置视口高度
      let $screenHeight = document.documentElement.clientHeight;
      this.$refs.searchWrap.style.height = $screenHeight - 100 + "px";
    },
    selectMenu(index) {
      this.currentIndex = index;
    },
    selectProduct(item) {
      this.$router.push({ path: `product-list?categoryId=${item.categoryId}` });
    },
  },
};
</script>
<style lang="less" scoped>
@import "../common/style/mixin";
.categray {
  .category-header {
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    .fj();
    .wh(100%, 50px);
    line-height: 50px;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 15px;
    color: #656771;
    z-index: 10000;
    &.active {
      background: @primary;
    }
    .icon-left {
      font-size: 25px;
      font-weight: bold;
    }
    .header-search {
      display: flex;
      width: 80%;
      height: 20px;
      line-height: 20px;
      margin: 10px 0;
      padding: 5px 0;
      color: #232326;
      background: #f7f7f7;
      border-radius: 20px;
      .nbSearch {
        padding: 0 10px 0 20px;
        font-size: 17px;
      }
      .search-title {
        font-size: 12px;
        color: #666;
      }
    }
    .icon-More {
      font-size: 20px;
    }
  }
}
.search-wrap {
  .fj();
  width: 100%;
  // margin-top: 50px;
  background: #f8f8f8;
  border-top: 1px solid #999;
  .nav-side-wrapper {
    width: 28%;
    height: 100%;
    overflow: hidden;
    .nav-side {
      width: 100%;
      .boxSizing();
      background: #f8f8f8;
      li {
        width: 100%;
        height: 56px;
        text-align: center;
        line-height: 56px;
        font-size: 14px;
        &.active {
          color: @primary;
          background: #fff;
        }
      }
    }
  }
  .search-content {
    width: 72%;
    height: 100%;
    padding: 0 10px;
    background: #fff;
    .boxSizing();
    .swiper-container {
      width: 100%;
      .swiper-slide {
        width: 100%;
        .category-main-img {
          width: 100%;
        }
        .category-list {
          display: flex;
          flex-wrap: wrap;
          flex-shrink: 0;
          width: 100%;
          .catogory-title {
            width: 100%;
            font-size: 17px;
            font-weight: 500;
            padding: 20px 0;
          }
          .product-item {
            width: 33.3333%;
            margin-bottom: 10px;
            text-align: center;
            font-size: 15px;
            .product-img {
              .wh(30px, 30px);
            }
          }
        }
      }
    }
  }
}
.fade-out-enter-active,
.fade-out-leave-active {
  // transition: opacity 0.5s;
}

.fade-out-enter,
.fade-out-leave-to {
  // opacity: 0;
}
</style>
